const { defineComponent } = require('san');

const Switch = defineComponent({
    changeModel () {
        const { model } = this.data.get()
        this.data.set('model', !model)
        this.fire('change', !model)
    },
    template: `<div class="san-switch-box">
        <span class="san-switch-title-text" s-if="title && title.length">{{ title }}</span>
        <button class="san-switch {{ model ? 'san-switch-checked' : '' }}" on-click="changeModel" style="background-color: {{ model ? (color || '#1890ff') : '#bfbfbf' }}" >
            <span class="san-switch-inner" s-html="{{ model ? activeText : closeText }}"></span>
            <div class="san-click-animating-node" style="border-color: {{ color || '#1890ff' }}"></div>
        </button>
    </div>`
})

module.exports = Switch